import React, { ChangeEvent, useState, useEffect } from 'react';
import styles from "@/assets/style/login.module.scss";
import '@/assets/style/login.less';
import { Input, Space, Button, message } from 'antd';
import { UserOutlined, LockOutlined, IeOutlined } from '@ant-design/icons';
import initLoginBg from "@/utils/init.ts";
import { getTime } from "@/utils/time.ts";
import { useNavigate } from "react-router-dom";
const View: React.FC = () => {
    const navigateTo = useNavigate();
    useEffect(() => {
        initLoginBg();
        window.onresize = function () { initLoginBg() };
        getCaptchaImg();
    }, [])
    const [usernameVal, setUsernameVal] = useState(""); // 定义用户输入用户名这个变量
    const [passwordVal, setPasswordVal] = useState(""); // 定义用户输入密码这个变量
    const [captchaVal, setCaptchaVal] = useState(""); // 定义用户输入验证码这个变量
    const usernameChange = (e: ChangeEvent<HTMLInputElement>) => {
        setUsernameVal(e.target.value);
    }
    const passwordChange = (e: ChangeEvent<HTMLInputElement>) => {
        setPasswordVal(e.target.value);
    }
    const captchaChange = (e: ChangeEvent<HTMLInputElement>) => {
        setCaptchaVal(e.target.value);
    }
    // 点击验证码图片盒子的事件函数
    const getCaptchaImg = async () => {
        setCaptchaImg('http://shop.jansens520.com/captcha.jpg?t=' + new Date());
    }
    // 定义一个变量保存验证码图片信息
    const [captchaImg, setCaptchaImg] = useState("");
    // 点击登录按钮的事件函数
    const gotoLogin = async () => {
        // 验证是否有空值
        if (!usernameVal.trim() || !passwordVal.trim() || !captchaVal.trim()) {
            message.warning("请完整输入信息！")
            return
        }
        // 1、提示登录成功
        message.success("登录成功！")
        // 2、保存token
        localStorage.setItem("token", '1234')
        // 3、跳转到/page1
        navigateTo("/")
    }
    return (
        <div className={styles.loginPage}>
            {/* 存放背景 */}
            <canvas id="canvas" style={{ display: "block" }}></canvas>
            {/* 登录盒子 */}
            <div className={styles.loginBox + " loginbox"}>
                {/* 标题部分 */}
                <div className={styles.title}>
                    <h1>后台管理系统</h1>
                    <p>{'Hi，' + getTime() + '好'}</p>
                </div>
                {/* 表单部分 */}
                <div className="form">
                    <Space direction="vertical" size="large" style={{ display: 'flex' }}>
                        <Input placeholder="用户名" size="large" prefix={<UserOutlined />} onChange={usernameChange} />
                        <Input.Password placeholder="密码" prefix={<LockOutlined />} size="large" onChange={passwordChange} />
                        {/* 验证码盒子 */}
                        <div className="captchaBox">
                            <Input placeholder="验证码" size='large' prefix={<IeOutlined />} onChange={captchaChange} />
                            <div className="captchaImg" onClick={getCaptchaImg}>
                                <img height="38" src={captchaImg} alt="" />
                            </div>
                        </div>
                        <Button type="primary" className="loginBtn" block onClick={gotoLogin}>登录</Button>
                    </Space>
                </div>
            </div>
        </div>
    )
}

export default View;